{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Creeps Judge{% endblock %}</title>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="{% static 'images/favicon.svg' %}">
    <link rel="alternate icon" href="{% static 'images/favicon.svg' %}">
    <link rel="mask-icon" href="{% static 'images/favicon.svg' %}" color="#667eea">

    <!-- Bootstrap CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="{% static 'css/all.min.css' %}" rel="stylesheet">
    <!-- Common Components CSS -->
    <link href="{% static 'css/common-components.css' %}" rel="stylesheet">

    <style>
        :root {
            --primary-gold: #ffd700;
            --primary-gold-alpha: rgba(255, 215, 0, 0.3);
            --primary-gold-glow: rgba(255, 215, 0, 0.5);
            --gradient-primary: linear-gradient(135deg, #667eea, #764ba2);
            --gradient-gold-hover: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
            --gradient-gold-active: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.2));
            --text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            --transition-smooth: all 0.3s ease;
            --border-radius-sm: 4px;
            --border-radius-md: 8px;
            --border-radius-lg: 15px;
        }

        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            position: relative;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            box-sizing: border-box;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(100, 150, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
            will-change: transform;
        }

        * {
            box-sizing: border-box;
        }

        .background-effect {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        #matrix-canvas {
            z-index: -1;
            opacity: 0.3;
        }

        .particles {
            z-index: -2;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            animation: float 8s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(180deg);
            }
        }

        /* 表单样式 */
        .form-control,
        .form-select {
            background-color: rgba(255, 255, 255, 0.9) !important;
            color: #333 !important;
            border: 2px solid rgba(255, 215, 0, 0.3) !important;
            border-radius: 8px !important;
            padding: 0.75rem !important;
            font-size: 1rem !important;
            transition: all 0.3s ease !important;
        }

        .form-control:focus,
        .form-select:focus {
            background-color: rgba(255, 255, 255, 0.95) !important;
            color: #333 !important;
            border-color: var(--primary-gold) !important;
            box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25) !important;
            outline: none !important;
        }

        .form-control::placeholder {
            color: #666 !important;
            opacity: 0.8 !important;
        }

        .form-label {
            color: var(--primary-gold) !important;
            font-weight: 600 !important;
            margin-bottom: 0.5rem !important;
        }

        .form-text {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        .text-danger {
            color: #ff6b6b !important;
        }

        .card {
            background: rgba(0, 0, 0, 0.7) !important;
            border: 2px solid rgba(255, 215, 0, 0.3) !important;
            border-radius: 15px !important;
            backdrop-filter: blur(10px) !important;
        }

        .card-header {
            background: rgba(255, 215, 0, 0.1) !important;
            border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
            color: var(--primary-gold) !important;
        }

        .card-body {
            color: white !important;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2) !important;
            border: 2px solid var(--primary-gold-alpha) !important;
            color: white !important;
            font-weight: 600 !important;
            padding: 0.75rem 1.5rem !important;
            border-radius: 8px !important;
            transition: all 0.3s ease !important;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #5a6fd8, #6a4190) !important;
            border-color: var(--primary-gold) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.1) !important;
            border: 2px solid rgba(255, 255, 255, 0.3) !important;
            color: white !important;
            font-weight: 600 !important;
            padding: 0.75rem 1.5rem !important;
            border-radius: 8px !important;
            transition: all 0.3s ease !important;
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
            color: white !important;
            transform: translateY(-2px) !important;
        }

        .alert-info {
            background: rgba(0, 123, 255, 0.1) !important;
            border: 1px solid rgba(0, 123, 255, 0.3) !important;
            color: #87ceeb !important;
        }

        .alert-danger {
            background: rgba(220, 53, 69, 0.1) !important;
            border: 1px solid rgba(220, 53, 69, 0.3) !important;
            color: #ff6b6b !important;
        }

        /* 文件输入字段样式 */
        input[type="file"] {
            background-color: rgba(255, 255, 255, 0.9) !important;
            color: #333 !important;
            border: 2px solid rgba(255, 215, 0, 0.3) !important;
            border-radius: 8px !important;
            padding: 0.75rem !important;
            font-size: 1rem !important;
            transition: all 0.3s ease !important;
        }

        input[type="file"]:focus {
            background-color: rgba(255, 255, 255, 0.95) !important;
            color: #333 !important;
            border-color: var(--primary-gold) !important;
            box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25) !important;
            outline: none !important;
        }

        /* 文件输入字段的文件选择器按钮 */
        input[type="file"]::-webkit-file-upload-button {
            background: linear-gradient(135deg, #667eea, #764ba2) !important;
            border: none !important;
            color: white !important;
            padding: 0.5rem 1rem !important;
            border-radius: 6px !important;
            margin-right: 1rem !important;
            cursor: pointer !important;
            font-weight: 600 !important;
            transition: all 0.3s ease !important;
        }

        input[type="file"]::-webkit-file-upload-button:hover {
            background: linear-gradient(135deg, #5a6fd8, #6a4190) !important;
            transform: translateY(-1px) !important;
        }

        /* 游戏化导航栏样式 */
        nav.navbar,
        .navbar {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%) !important;
            backdrop-filter: blur(15px) !important;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
            padding: 0.5rem 0 !important;
            margin: 0 !important;
            min-height: 80px !important;
            max-height: 80px !important;
            height: 80px !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
            position: relative !important;
        }

        .navbar .container,
        .navbar .container-fluid {
            padding: 0 !important;
            margin: 0 !important;
            height: 100% !important;
            max-width: none !important;
            width: 100% !important;
        }

        .game-navbar {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            width: 100% !important;
            padding: 0 2rem !important;
            min-height: 70px !important;
            max-height: 70px !important;
            height: 70px !important;
            margin: 0 !important;
            gap: 1.5rem !important;
        }

        .player-info {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 0 0 auto;
            justify-content: flex-start;
            min-width: 200px;
        }

        .player-avatar {
            position: relative;
            width: 50px;
            height: 50px;
            display: block;
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        .player-avatar:hover {
            transform: scale(1.05);
        }

        .player-avatar img,
        .player-avatar .default-avatar,
        .navbar .user-avatar {
            width: 50px !important;
            height: 50px !important;
            border-radius: 50%;
            border: 3px solid var(--primary-gold) !important;
            box-shadow: 0 0 15px var(--primary-gold-glow);
            object-fit: cover;
        }

        .default-avatar {
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            color: white;
        }

        .player-level {
            position: absolute;
            bottom: -5px;
            right: -5px;
            background: linear-gradient(45deg, #ff6b35, #f7931e);
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            border: 2px solid #fff;
        }

        .player-details {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .player-name {
            color: var(--primary-gold);
            font-weight: bold;
            font-size: 16px;
            text-shadow: var(--text-shadow);
        }

        .exp-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .exp-bar {
            width: 120px;
            height: 8px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: var(--border-radius-sm);
            overflow: hidden;
            border: 1px solid var(--primary-gold-alpha);
        }

        .exp-fill {
            height: 100%;
            background: linear-gradient(90deg, #00ff88, #00cc6a);
            border-radius: 3px;
            transition: width 0.3s ease;
            box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
        }

        .exp-text {
            color: #00ff88;
            font-size: 14px;
            font-weight: bold;
            text-shadow: var(--text-shadow);
        }

        .game-nav-buttons {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex: 1;
            justify-content: center;
            flex-wrap: wrap;
            min-width: 0;
        }

        .game-btn {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            border: 2px solid var(--primary-gold-alpha);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius-md);
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
            transition: var(--transition-smooth);
            position: relative;
            overflow: hidden;
            text-shadow: var(--text-shadow);
        }

        .game-btn:hover {
            background: var(--gradient-gold-hover);
            border-color: var(--primary-gold);
            color: var(--primary-gold);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px var(--primary-gold-alpha);
        }

        .game-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .game-btn:hover::before {
            left: 100%;
        }

        .game-btn.active {
            background: var(--gradient-gold-active);
            border-color: var(--primary-gold);
            color: var(--primary-gold);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
            transform: translateY(-2px);
        }

        .game-btn.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
            border-radius: 2px;
        }

        .home-btn:hover {
            background: var(--gradient-gold-hover);
            border-color: var(--primary-gold);
            color: var(--primary-gold);
        }

        .home-btn.active {
            background: var(--gradient-gold-active);
            border-color: var(--primary-gold);
            color: var(--primary-gold);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
        }

        .logout-btn {
            background: linear-gradient(135deg, #dc3545, #c82333);
            border: 2px solid #dc3545;
            padding: 0.5rem;
            border-radius: 6px;
        }

        .logout-btn:hover {
            background: linear-gradient(135deg, #c82333, #dc3545);
            border-color: #bd2130;
        }

        .card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: none;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border-radius: var(--border-radius-lg);
        }

        .btn-primary {
            background: var(--gradient-primary);
            border: none;
            transition: var(--transition-smooth);
        }

        .btn-primary:hover {
            background: linear-gradient(45deg, #764ba2, #667eea);
            transform: translateY(-2px);
        }

        /* 世界杯通知在导航栏中的优化样式 */
        .game-nav-buttons .worldcup-notification {
            flex: 0 0 auto;
            margin-left: auto;
            order: 999;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 响应式优化 */
        @media (max-width: 1200px) {
            .game-navbar {
                padding: 0 1rem !important;
                gap: 1rem !important;
            }

            .player-info {
                min-width: 180px;
            }

            .game-nav-buttons {
                gap: 0.5rem;
            }

            .game-btn {
                padding: 0.4rem 0.8rem;
                font-size: 13px;
            }

            .worldcup-notification {
                font-size: 0.8rem !important;
                padding: 6px 12px !important;
                max-width: 150px !important;
            }
        }

        @media (max-width: 992px) {
            .game-navbar {
                flex-wrap: wrap;
                min-height: auto !important;
                max-height: none !important;
                height: auto !important;
                padding: 0.5rem 1rem !important;
            }

            .player-info {
                order: 1;
                width: 100%;
                justify-content: center;
                margin-bottom: 0.5rem;
            }

            .game-nav-buttons {
                order: 2;
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;
            }

            .worldcup-notification {
                order: 3;
                margin: 0.5rem auto 0;
                max-width: none !important;
            }
        }
    </style>

    {% block extra_css %}{% endblock %}
</head>

<body>
    <canvas id="matrix-canvas" class="background-effect"></canvas>
    <div class="particles background-effect" id="particles"></div>
    <!-- 游戏化导航栏 -->
    <nav class="navbar">
        <div class="container">
            <div class="game-navbar">
                {% if user.is_authenticated %}
                <!-- 玩家信息区域 -->
                <div class="player-info">
                    <!-- 玩家头像 -->
                    <a href="{% url 'accounts:personal_space' %}" class="player-avatar">
                        {% if user.profile.avatar %}
                        <img src="{{ user.profile.avatar.url }}" alt="{{ user.username }}的头像" class="user-avatar">
                        {% else %}
                        <img src="/static/images/default_avatar.svg" alt="{{ user.username }}的头像" class="user-avatar">
                        {% endif %}
                        <div class="player-level">{{ user.profile.level|default:"1" }}</div>
                    </a>

                    <!-- 玩家名称和经验条 -->
                    <div class="player-details">
                        <div class="player-name">{{ user.username }}</div>
                        <div class="exp-container">
                            <div class="exp-bar">
                                <div class="exp-fill" style="width: {{ user.profile.exp_percentage|default:"0" }}%"></div>
                                <div class="exp-text">{{ user.profile.exp|default:"0" }} / {{ user.profile.next_level_exp|default:"332" }} EXP</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 游戏功能按钮 -->
                <div class="game-nav-buttons">
                    <a href="/"
                        class="game-btn home-btn{% if request.resolver_match.url_name == 'home' and not request.resolver_match.namespace %} active{% endif %}">
                        <i class="fas fa-home"></i> 主城
                    </a>
                    {% if not user.is_staff %}
                        <a href="{% url 'battles:battle_list' %}"
                            class="game-btn{% if request.resolver_match.namespace == 'battles' and request.resolver_match.url_name in 'battle_list,battle_detail,battle_create,battle_statistics' %} active{% endif %}">
                            <i class="fas fa-hand-rock"></i> 对战
                        </a>
                        <a href="{% url 'codes:code_list' %}"
                            class="game-btn{% if request.resolver_match.namespace == 'codes' %} active{% endif %}">
                            <i class="fas fa-code"></i> 代码
                        </a>
                    {% endif %}
                    <a href="{% url 'battles:worldcup_list' %}"
                        class="game-btn{% if request.resolver_match.url_name in 'worldcup_list,worldcup_detail,worldcup_regular_season,worldcup_championship' %} active{% endif %}">
                        <i class="fas fa-globe"></i> 世界杯
                    </a>
                    <a href="{% url 'battles:battle_ranking' %}"
                        class="game-btn{% if request.resolver_match.url_name == 'battle_ranking' %} active{% endif %}">
                        <i class="fas fa-trophy"></i> 排行榜
                    </a>
                    {% if user.is_staff %}
                        <a href="{% url 'battles:battles_history' %}"
                            class="game-btn{% if request.resolver_match.url_name == 'battles_history' %} active{% endif %}">
                            <i class="fas fa-history"></i> 管理对战
                        </a>
                        <a href="{% url 'battles:monitoring_dashboard' %}"
                            class="game-btn{% if request.resolver_match.url_name == 'monitoring_dashboard' %} active{% endif %}">
                            <i class="fas fa-chart-line"></i> 监控仪表
                        </a>
                        <a href="{% url 'accounts:admin_feature_switches' %}"
                            class="game-btn{% if request.resolver_match.url_name == 'admin_feature_switches' %} active{% endif %}">
                            <i class="fas fa-toggle-on"></i> 功能开关
                        </a>
                        <a href="/admin/"
                            class="game-btn">
                            <i class="fas fa-cog"></i> 系统管理
                        </a>
                    {% else %}
                        <a href="{% url 'battles:battles_history' %}"
                            class="game-btn{% if request.resolver_match.url_name == 'battles_history' %} active{% endif %}">
                            <i class="fas fa-history"></i> 对战历史
                        </a>
                    {% endif %}
                    <a href="{% url 'api_docs:home' %}"
                        class="game-btn{% if request.resolver_match.namespace == 'api_docs' %} active{% endif %}">
                        <i class="fas fa-book"></i> 攻略
                    </a>
                    <form method="post" action="{% url 'accounts:logout' %}" style="display: inline;">
                        {% csrf_token %}
                        <button type="submit" class="game-btn logout-btn">
                            <i class="fas fa-sign-out-alt"></i>
                        </button>
                    </form>

                    <!-- 世界杯动画提示 -->
                    {% if has_active_worldcup %}
                    {% if active_worldcup.status == 'regular_season' %}
                    <a href="{% url 'battles:worldcup_regular_season' active_worldcup.id %}" class="worldcup-notification">
                        <i class="{{ worldcup_icon_class }} worldcup-icon"></i>
                        <span class="worldcup-text">{{ worldcup_display_text }}</span>
                    </a>
                    {% elif active_worldcup.status == 'championship' %}
                    <a href="{% url 'battles:worldcup_championship' active_worldcup.id %}" class="worldcup-notification">
                        <i class="{{ worldcup_icon_class }} worldcup-icon"></i>
                        <span class="worldcup-text">{{ worldcup_display_text }}</span>
                    </a>
                    {% else %}
                    <a href="{% url 'battles:worldcup_detail' active_worldcup.id %}" class="worldcup-notification">
                        <i class="{{ worldcup_icon_class }} worldcup-icon"></i>
                        <span class="worldcup-text">{{ worldcup_display_text }}</span>
                    </a>
                    {% endif %}
                    {% endif %}
                </div>
                {% else %}
                <!-- 未登录状态 -->
                <div class="player-info">
                    <a href="/" class="game-btn home-btn">
                        <i class="fas fa-gamepad"></i> Creeps Judge
                    </a>
                </div>
                <div class="game-nav-buttons">
                    <a href="{% url 'accounts:login' %}" class="game-btn">
                        <i class="fas fa-sign-in-alt"></i> 登录
                    </a>
                    <a href="{% url 'accounts:signup' %}" class="game-btn">
                        <i class="fas fa-user-plus"></i> 注册
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </nav>

    <!-- Messages -->
    {% if messages %}
    <div class="container mt-3">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Main Content -->
    <main>
        {% block content %}
        {% endblock %}
    </main>

    <!-- Footer -->
    <footer class="mt-5 py-4 text-center text-white">
        <div class="container">
            <p>&copy; 2025 Creeps Judge. All rights reserved.</p>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <!-- jQuery -->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>

    <!-- Background Effects -->
    <script>
        // 配置常量
        const CONFIG = {
            matrix: {
                characters: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+-=[]{}|;:,.<>?',
                fontSize: 14,
                speed: 50,
                resetProbability: 0.975,
                backgroundAlpha: 0.05,
                textColor: '#c0c0c0'
            },
            particles: {
                count: 15,
                minSize: 2,
                maxSize: 6,
                minDuration: 6,
                maxDuration: 10,
                maxDelay: 2,
                colors: ['rgba(255, 255, 255, 0.6)', 'rgba(102, 126, 234, 0.6)', 'rgba(118, 75, 162, 0.6)']
            }
        };

        // Matrix雨效果
        class MatrixRain {
            constructor() {
                this.canvas = document.getElementById('matrix-canvas');
                this.ctx = this.canvas.getContext('2d');
                this.matrixArray = CONFIG.matrix.characters.split('');
                this.drops = [];
                this.columns = 0;

                this.init();
            }

            init() {
                this.resizeCanvas();
                this.initDrops();
                this.startAnimation();
                window.addEventListener('resize', () => this.handleResize());
            }

            resizeCanvas() {
                this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;
            }

            initDrops() {
                this.columns = Math.floor(this.canvas.width / CONFIG.matrix.fontSize);
                this.drops.length = 0;
                for (let i = 0; i < this.columns; i++) {
                    this.drops[i] = Math.floor(Math.random() * this.canvas.height / CONFIG.matrix.fontSize);
                }
            }

            draw() {
                // 半透明背景
                this.ctx.fillStyle = `rgba(0, 0, 0, ${CONFIG.matrix.backgroundAlpha})`;
                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

                // 绘制字符
                this.ctx.fillStyle = CONFIG.matrix.textColor;
                this.ctx.font = `${CONFIG.matrix.fontSize}px monospace`;

                for (let i = 0; i < this.drops.length; i++) {
                    const text = this.matrixArray[Math.floor(Math.random() * this.matrixArray.length)];
                    this.ctx.fillText(text, i * CONFIG.matrix.fontSize, this.drops[i] * CONFIG.matrix.fontSize);

                    // 重置雨滴
                    if (this.drops[i] * CONFIG.matrix.fontSize > this.canvas.height && Math.random() > CONFIG.matrix.resetProbability) {
                        this.drops[i] = 0;
                    }
                    this.drops[i]++;
                }
            }

            startAnimation() {
                setInterval(() => this.draw(), CONFIG.matrix.speed);
            }

            handleResize() {
                this.resizeCanvas();
                this.initDrops();
            }
        }

        // 粒子效果
        class ParticleEffect {
            constructor() {
                this.container = document.getElementById('particles');
                this.createParticles();
            }

            createParticles() {
                const fragment = document.createDocumentFragment();

                for (let i = 0; i < CONFIG.particles.count; i++) {
                    const particle = this.createParticle();
                    fragment.appendChild(particle);
                }

                this.container.appendChild(fragment);
            }

            createParticle() {
                const particle = document.createElement('div');
                particle.className = 'particle';

                // 随机大小
                const size = Math.random() * (CONFIG.particles.maxSize - CONFIG.particles.minSize) + CONFIG.particles.minSize;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;

                // 随机位置
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;

                // 随机颜色
                const color = CONFIG.particles.colors[Math.floor(Math.random() * CONFIG.particles.colors.length)];
                particle.style.background = color;

                // 随机动画时长和延迟
                const duration = Math.random() * (CONFIG.particles.maxDuration - CONFIG.particles.minDuration) + CONFIG.particles.minDuration;
                const delay = Math.random() * CONFIG.particles.maxDelay;
                particle.style.animationDuration = `${duration}s`;
                particle.style.animationDelay = `${delay}s`;

                return particle;
            }
        }

        // 初始化效果
        document.addEventListener('DOMContentLoaded', () => {
            new MatrixRain();
            new ParticleEffect();
        });
    </script>

    <script>
        // 自动消失消息
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                // 1.5秒后自动消失
                setTimeout(function() {
                    if (alert && alert.parentNode) {
                        alert.classList.remove('show');
                        alert.classList.add('fade');
                        setTimeout(function() {
                            if (alert && alert.parentNode) {
                                alert.remove();
                            }
                        }, 150);
                    }
                }, 1500);
            });
        });
    </script>

    {% block extra_js %}{% endblock %}
</body>

</html>